<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
		
 	<script src="js/common.js"></script>
 	<script type="text/javascript" src="js/jssor.js"></script>
	<script type="text/javascript" src="js/jssor.slider.js"></script> 
	<script type="text/javascript" src="js/jssor.player.ytiframe.js"></script>	 	
	<link rel="stylesheet" type="text/css" href="css/tris.css">
	
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
 	<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
	<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
	 	
	<script>

		<!-- Common functions -->
		<?php include 'common.php'; ?>

		<!-- On server-side generates the "var webURLString = '...'" -->		
		<?php echo "var webURLString = '" . getWebURLString() ."';"; ?>

		var map;
		var infoWindows = [];  				//For keep track of opened Info Windows
		var excursionArray = {};

		var defaultPictureWidth = 400;
		var defaultPictureHeight = 300;
		var defaultPictureCaptionHeight = 50;
		var defaultPictureBackgroundColor = "#000000";

		$(window).load(function( $ ){
			resizeMapCanvas();
		});
		
		$(window).resize(function( $ ){
			resizeMapCanvas();
		});
		
		/**
		*
		* Initializes the MAP
		* Size, position, markers
		*
		*/
		function initialize() {

			//
			// Language section
			//	

			var defaultLanguage = "<?php echo $defaultLanguage; ?>";
			var languageKey = "<?php echo $cookieLanguage; ?>";
			var language = getCookie( languageKey );
			if( language == null ){
				language = defaultLanguage;
				setCookie(languageKey, defaultLanguage);
			}
			imgName = webURLString+"images/language_icons/language_" + language + ".png";	

			$('#language_menu').append($('<option/>', { 
				value: "hu",
				text : "Magyar" 
		    }));
			$('#language_menu').append($('<option/>', { 
				value: "en",
				text : "English" 
		    }));
		    
			$('#language_menu').val( language ).change();

			$('#language_menu').change( function(){			
				setCookie( "<?php echo $cookieLanguage ?>", $(this).val());
				location.reload();
			});

			//
			// Google map
			//
			$("#map_canvas").resizable({
	      		"resize" : function(event,ui) {
	            	google.maps.event.trigger(map,'resize');
	      		}
			});

			var mapProp = {
				    center:new google.maps.LatLng(47.214688, 19.606562),
				    zoom:8,
				    mapTypeId:google.maps.MapTypeId.ROADMAP,
				    panControl: false,
				    zoomControl: false,
				    mapTypeControl: true,
				    scaleControl: false,
				    streetViewControl: true,			    			  			    
			};
			map = new google.maps.Map(document.getElementById("map_canvas"),mapProp);
		    
			//
			// Detail tab
			//
			$(document).ready(function( $ ){
				var container = $( "#excursion_details_container" );
				$( "#excursion_details_tab" ).click( function( event ){
					event.preventDefault();
					if (container.is( ":visible" )){
						container.slideUp( 500 );
						$( "#excursion_details_tab" ).text("^");						
					} else {
						container.slideDown( 500 );
						$( "#excursion_details_tab" ).text("v");
					}
				});
			});

			//
			// Kirandulas lista gyujtese
			//
			$.ajax({
				type: "GET",
				url: webURLString + "get_excursion_list.php",
				contentType: "text/html",
				dataType: "json",
				async:true,
				success: showExcursionListSuccess,
				error: getError
			});			        
		}

		/**
		*
		* Tablazatba teszi a megszerzett kirandulasok listajat
		* Adatait pedig excursionArray-ba helyezi
		*
		*/		
		function showExcursionListSuccess( data, status, req ){

			if( status =="success"){	

				//Megkeresi az "excurions" array-t es vegig megy minden elemen 
				$.each( data.excursions, function( index, element ){

					var excursionId = element.id;
					var excursionName = element.name;
					var excursionDateStart = element.dateStart;
					var excursionDateEnd = element.dateEnd;
					var excursionColor = element.color;

					$('#excursion_list table').append("<tr id='" + excursionId + "' shown='false'><td>" + excursionName + "</td><td>" + excursionDateStart + "</td></tr>");					

					//
					//Kivalasztottam valamelyik kirandulast
					//
					$( "#" + excursionId ).click(function() {

						//Close all opened infowindow
						closeAllOpenedInfowindow();

						//Check if the excursion appeared
						actualExcursion = excursionArray[ excursionId ];

						//The excursion does not appear yet
						if( actualExcursion == null ){

							//Make it appear if it is not yet
							$.ajax({
								type: "GET",
								url: webURLString + "get_excursion_connections.php",
								data: { 'excursionid': excursionId },
								contentType: "text/html",
								dataType: "xml",
								async:true,
								selectedElement: this,
								selectedExcursion: {excursionId: excursionId, excursionName: excursionName, excursionDateStart: excursionDateStart, excursionDateEnd: excursionDateEnd, excursionColor: excursionColor},
								success: showExcursionConnectionsSuccess,
								error: getError,
							});

						//The excurion must be deleted
						}else{

							excursionObject = actualExcursion.graphics;
							
							for (var i in excursionObject) {
								excursionObject[i].setMap(null);
							}						
							
							delete excursionArray[excursionId];
							
							//Set the CHECKED attribute to FALSE							
							$(this).attr("shown", "false");							
							showExcursionDetailsIfNecessary( excursionArray );					
						};
					});		
				});
			};
		}
    		
		/**
		*
		* A kivalasztott kirandulas adatait mutatja meg
		* A szallasok es a kirandulas utvonalak megjelenitese a terkepen
		* Ha csak 1 kirandulas van kivalasztva, akkor annak reszleteit megjeleniti
		*
		*/
		function showExcursionConnectionsSuccess( data, status, req ){
		
			if( status =="success"){

				var selectedExcursion = $(this.selectedExcursion)[0];
				
				//Graphical elements (routePath, marker) administration
				var shownGraphics = [];
				
				//<tour id="" type="">
				$(data).find("tour").each(function(){
					var tourId = $(this).attr("id");
					var tourType = $(this).attr("type");
					var tourDay = $(this).attr("day");

					//The route path is empty
					var routePathArray = new Array();
					var preLatLong = null;
					var tourLength = 0;					
				
					//<route lat="" lng="" time="">
					$(this).find("route").each(function(){
						routeLat = parseFloat( $(this).attr("lat") );
						routeLng = parseFloat( $(this).attr("lng") );
						routeTime = $(this).find("time").text();
						routeLatLong = new google.maps.LatLng(routeLat, routeLng);
						if( preLatLong != null ){
							routeDistance = google.maps.geometry.spherical.computeDistanceBetween (preLatLong, routeLatLong);
							tourLength += routeDistance;
						}
						preLatLong = routeLatLong;
						
						//Add new section to the route path
						routePathArray[routePathArray.length] = new google.maps.LatLng( routeLat, routeLng );
						 
					});

					//Tour path
					var routePath = new google.maps.Polyline({
						path: routePathArray,
						strokeColor: "#" + selectedExcursion.excursionColor,
						strokeOpacity: 0.5,
						strokeWeidht: 5,
					});
					routePath.setMap(map);

					//Keep track of routePath
					shownGraphics.push(routePath);					
				
					//Tour infowindow				
					var infoWindow = new google.maps.InfoWindow({
						content:
							"<table class='info-window' border='0'>"+
								"<tr colspan='1'>"+
									"<th>" +
										"<center><b><?php echo getTranslation('label.infowindow.tour.title')?></b></center>"+
									"</th>" +
								"</tr>" +
								"<tr>" +
									"<td>" +
										"<table border='0'>"+
											"<tr>"+
												"<td><?php echo getTranslation('label.infowindow.tour.excursion')?> : </td><td>" + selectedExcursion.excursionName + "</td>"+
											"</tr>"+
											"<tr>"+
												"<td><?php echo getTranslation('label.infowindow.tour.day') ?> : </td><td>" + tourDay +	"</td>"+
											"</tr>"+
											"<tr>"+
												"<td><?php echo getTranslation('label.infowindow.tour.type')?> : </td><td>" + tourType + "</td>"+	
											"</tr>"+
											"<tr>"+
												"<td><?php echo getTranslation('label.infowindow.tour.length')?>: </td><td>" + tourLength.toFixed(2) + " m" + "</td>"+	
											"</tr>"+
										"</table>"+
									"</td>" +									
								"</tr>" +							
							"</table>"
							
					});

					infoWindows.push( infoWindow );

					//In case of Click on the path, an Info Window appears
					google.maps.event.addListener(routePath, 'click', function(event) {
						mLat = event.latLng.lat();
	                    mLng = event.latLng.lng();

	                  	//Close all opened Info Window
	                  	closeAllOpenedInfowindow();

						infoWindow.setPosition(event.latLng);
						infoWindow.open(map);
					});
					
				});

				//<accomodation accomodation_id="" excursion_name="" accomodation_name="" accomodation_type="" accomodation_address="" accomodation_lat="" accomodation_lng="">
				$(data).find("accomodation").each(function(){
					accomodationId = $(this).attr("accomodation_id");
					accomodationName = $(this).attr("accomodation_name");
					accomodationType = $(this).attr("accomodation_type");
					accomodationAddress = $(this).attr("accomodation_address");
					accomodationLat = $(this).attr("accomodation_lat");
					accomodationLng = $(this).attr("accomodation_lng");
					accomodationIcon = $(this).attr("accomodation_icon");

					var marker = new google.maps.Marker({
						position: new google.maps.LatLng( accomodationLat, accomodationLng ),
						map: map,
						icon: getPinImage(selectedExcursion.excursionColor),
			            shadow: getPinShadow()
					});

					//Kepp track of marker
					shownGraphics.push(marker);

					var days = "";
					$(this).find("day").each(function(){	
						if( days != "" ){
							days += ", <br>";
						}
						days += $(this).text();						
					});

					//Accomodation infowindow
					var infoWindow = new google.maps.InfoWindow({
						content: 
							"<table class='info-window' border='0'>"+
								"<tr colspan='2'>"+
									"<th>" +
										"<center><b><?php echo getTranslation('label.infowindow.accomodation.title')?></b></center>"+
									"</th>" +
								"</tr>" +
								"<tr>" +
									"<td>" +
										"<table border='0'>"+
											"<tr>"+
												"<td valign='top'><?php echo getTranslation('label.infowindow.accomodatioin.excursionname')?> : </td><td>" + selectedExcursion.excursionName + "</td>"+		
											"</tr>"+
											"<tr>"+
												"<td valign='top'><?php echo getTranslation('label.infowindow.accomodation.name')?>: </td><td>" + accomodationName + "</td>" +
											"</tr>"+
											"<tr>"+
												"<td valign='top'><?php echo getTranslation('label.infowindow.accomodation.address')?>: </td><td>" + accomodationAddress + "</td>" +
											"</tr>"+
											"<tr>"+
												"<td><?php echo getTranslation('label.infowindow.accomodation.type')?>: </td><td>" + accomodationType + "</td>" +
											"</tr>"+
											"<tr>"+
												"<td valign='top'><?php echo getTranslation('label.infowindow.accomodation.reserved')?>: </td><td>" + days + "</td>" +
											"</tr>"+
										"</table>"+			
									"</td>" +
									"<td valign='top'>" +
										"<img src=" + accomodationIcon + ">"+
									"</td>" +
								"</tr>" +							
							"</table>"
																			
					});

					infoWindows.push( infoWindow );

					//In case of Click on the path, an Info Window appears
					google.maps.event.addListener(marker, 'click', function(event) {
						mLat = event.latLng.lat();
	                    mLng = event.latLng.lng();
	                    
						//Close all opened Info Window
						closeAllOpenedInfowindow();

						infoWindow.setPosition(event.latLng);
						infoWindow.open(map);
					});

					//Arrange it to center
					//var center = new google.maps.LatLng(accomodationLat, accomodationLng);
				    //map.panTo(center);				
					
				});	

				//graphical elements of the actual excursion goes into an array
				excursionArray[ selectedExcursion.excursionId ] = {excursion: selectedExcursion, graphics: shownGraphics};
				
				//Set the CHECKED attribute to TRUE							
				$(this.selectedElement).attr("shown", "true");
				showExcursionDetailsIfNecessary( excursionArray );
											
			}
		}

		function getError( data, status, req ){
			alert( 'Hiba az ajax híváskor: \n' + data.responseText ); // + '\nstatus: ' + status + '\n' + 'req: ' + req.responseText);
		}

		/**
		*
		* Ha csak 1 kirandulas van kivalasztva, akkor annak reszleteit megjelenitjuk
		*
		* Ez meghivodik minden kirandulas elem-re valo kattintas utan
		*
		*/
		function showExcursionDetailsIfNecessary( excursionArray ){

			var excursionId = null;
			
			//If only One Excursion selected
			if( Object.keys(excursionArray).length == 1 ){

				//Get the excursion ID
				$.each(excursionArray, function(key, value){
					excursionId = key;
					return false;				    
				});
			}else{
				$('#excursion_details table').remove();
			}

			if( excursionId != null ){

				//Make it appear if it is not yet
				$.ajax({
					type: "GET",
					url: webURLString + "get_excursion_details.php",
					data: { 'excursionid': excursionId },
					contentType: "text/html",
					dataType: "json",
					async:true,
					actualExcursion: excursionArray[excursionId].excursion,
					success: showExcursionDetailsSuccess,
					error: getError
				});

			}else{

				//Torli a reszletes adatokat
				showExcursionDetailsSuccess( null, null, null );
			}

		}		
		
		/**
		*
		* Egy kirandulas reszleteit jeleniti meg
		*
		*/
		function showExcursionDetailsSuccess( data, status, req ){

			clearExcursionDetailContainer();
			clearPictureContainer();
		    
			if( status =="success"){
			
				var actualExcursion = $(this.actualExcursion)[0];

				$('#excursion_details_container>table').append(
						"<tr>" +
							"<th id='excursion_details_title' colspan='3' align='center'></th>" +
						"</tr>" +
						"<tr>" +
							"<td id='details_1column' valign='top' style='width:100%; padding: 0px; margin: 0px; border: 0px;'></td>" +
							"<td id='details_2column' valign='top' style='padding: 0px; margin: 0px; border: 0px;'></td>" +							
							"<td id='details_3column' valign='top' style='padding: 0px; margin: 0px; border: 0px;'><div id='media_container' style='background-color: " + defaultPictureBackgroundColor + "; width: " + defaultPictureWidth + "px; height: " + defaultPictureHeight + "px'></div></td>" +
						"</tr>"
				);
				
				//
				// Excursion data
				//
				$('#excursion_details_title').text( actualExcursion.excursionName );
				$('#details_2column').append( "<table border='0' width='100%'></table>" );				

				//Start date
				$('#details_2column>table').append(
						"<tr>" +
							"<td style='white-space:nowrap;'>" + "<?php echo getTranslation('label.detail.excursion.startdate')?>:" + "</td>" +
							"<td>" + actualExcursion.excursionDateStart + "</td>" +
						"</tr>"
				);
				//End date
				$('#details_2column>table').append(
						"<tr>" +
							"<td style='white-space:nowrap;'>" + "<?php echo getTranslation('label.detail.excursion.enddate')?>:" + "</td>" +
							"<td>" + actualExcursion.excursionDateEnd + "</td>" +
						"</tr>"
				);		

				// Nickname
				var elementNumber = 0;
				var nicknameList = "<ul class='detail_list'  >";
				$.each( data.participants, function( index, element ){
					nicknameList += "<li>" + element.nickname + "</li>";
					elementNumber++;				
				});
				nicknameList += "</ul>";

				if( elementNumber > 0 ){
					$('#details_1column').append( "<table border='0' width='100%'></table>" );		
					$('#details_1column>table').append(
						"<tr>" +
							"<td style='white-space:nowrap;' valign='top'>" + "<?php echo getTranslation('label.detail.excursion.participants')?>:" + "</td>" + 
							"<td id='nickname_list' style='white-space:nowrap; width:100%' valign='top'>" + nicknameList + "</td>" +
						"</tr>"
					);
				}
			
				//Video links
				var videoObjects = data.videolinks;
				if( videoObjects != null ){
					$('#details_2column table').append(
						"<tr>" +
							"<td valign='top'>" + "" + "</td>" + 
							"<td style='white-space:nowrap;' valign='top'><button id='video_button' type='button'><?php echo getTranslation('label.detail.excursion.videolinks')?></button></td>" +
						"</tr>"
					);
					$("#video_button").click( function(){

						clearPictureContainer();
						$('#media_container').append( "<div id='slider1_container' style='position: relative; width: " + defaultPictureWidth + "px; height: " + defaultPictureHeight + "px; background-color: " + defaultPictureBackgroundColor + "; overflow: hidden; '></div>");
						$('#slider1_container').append("<div u='slides' style='cursor: move; position: absolute; left: 0px; top: 0px; width: " + defaultPictureWidth + "px; height: " + defaultPictureHeight + "px; overflow: hidden;'></div>");
						
						$.each( videoObjects, function( index, element ){

							$('#slider1_container>div').append(
								"<div>" +
									"<div u='player' style='position: relative; top: 0px; left: 0px; width: 400px; height: 300px; overflow: hidden;'>" +

			                    		"<iframe pHandler='ytiframe' pHideControls='0' width='400' height='300' style='z-index: 0;' url='<?php getMediaURLString()?>" + element.link + "' />' frameborder='0' scrolling='no'></iframe>" +
			                    		"<div u='cover' class='videoCover' style='position: absolute; top: 0px; left: 0px; background-color: #000; background-image: url(images/media_icons/play.png); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=40); opacity: .4; cursor: pointer; display: none; z-index: 1;'></div>" +
			                    		"<style>" +
				                        	".closeButton { background-image: url(images/media_icons/close.png); }" +
			                        		".closeButton:hover { background-position: -30px 0px; }" +
			                    		"</style>" +
			                    		"<div u='close' class='closeButton' style='position: absolute; top: 0px; right: 1px; width: 30px; height: 30px; background-color: #000; cursor: pointer; display: none; z-index: 2;'></div>" +
			                    	"</div>"+
			                	"</div>"
							);
							
						});	

						$('#slider1_container').append(
							"<style>" +
			            		".jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {" +
					                "background: url(images/media_icons/b03.png) no-repeat;" +
			                		"overflow:hidden;" +
			                		"cursor: pointer;" +
			            		"}" +
			            		".jssorb03 div { background-position: -5px -4px; }" +
			            		".jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }" +
			            		".jssorb03 .av { background-position: -65px -4px; }" +
			            		".jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }" +
			        		"</style>" 
			        	);

						$('#slider1_container').append(
							"<div u='navigator' class='jssorb03' style='position: absolute; bottom: 6px; left: 6px;'>" +
				            	"<div u='prototype' style='POSITION: absolute; WIDTH: 21px; HEIGHT: 21px; text-align:center; line-height:21px; color:White; font-size:12px;'>" +
				            		"<div u='numbertemplate'></div>" +
				            	"</div>" +
			        		"</div>"
		        		);
						
						generateSlider();
	
					});					
				}

				// Music links			
				var musicObjects = data.musiclinks;
				if( Object.keys(musicObjects).length > 0 ){
					$('#details_2column table').append(
						"<tr>" +
							"<td valign='top'>" + "" + "</td>" + 
							"<td style='white-space:nowrap;' valign='top'><button id='music_button' type='button'><?php echo getTranslation('label.detail.excursion.musiclinks')?></button></td>" +
						"</tr>"
					);
					$("#music_button").click( function(){

						clearPictureContainer();
						$('#media_container').append( "<div id='slider1_container' style='position: relative; width: " + defaultPictureWidth + "px; height: " + defaultPictureHeight + "px; background-color: " + defaultPictureBackgroundColor + "; overflow: hidden; '></div>");
						$('#slider1_container').append("<div u='slides' style='cursor: move; position: absolute; left: 0px; top: 0px; width: " + defaultPictureWidth + "px; height: " + defaultPictureHeight + "px; overflow: hidden;'></div>");
						
						$.each( musicObjects, function( index, element ){

							$('#slider1_container>div').append(
								"<div>" +
									"<div u='player' style='position: relative; top: 0px; left: 0px; width: 400px; height: 300px; overflow: hidden;'>" +

			                    		"<iframe pHandler='ytiframe' pHideControls='0' width='400' height='300' style='z-index: 0;' url='<?php getMediaURLString()?>" + element.link + "' />' frameborder='0' scrolling='no'></iframe>" +
			                    		"<div u='cover' class='videoCover' style='position: absolute; top: 0px; left: 0px; background-color: #000; background-image: url(images/media_icons/play.png); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=40); opacity: .4; cursor: pointer; display: none; z-index: 1;'></div>" +
			                    		"<style>" +
				                        	".closeButton { background-image: url(images/media_icons/close.png); }" +
			                        		".closeButton:hover { background-position: -30px 0px; }" +
			                    		"</style>" +
			                    		"<div u='close' class='closeButton' style='position: absolute; top: 0px; right: 1px; width: 30px; height: 30px; background-color: #000; cursor: pointer; display: none; z-index: 2;'></div>" +
			                    	"</div>"+
			                	"</div>"
							);
							
						});	

						$('#slider1_container').append(
							"<style>" +
			            		".jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {" +
					                "background: url(images/media_icons/b03.png) no-repeat;" +
			                		"overflow:hidden;" +
			                		"cursor: pointer;" +
			            		"}" +
			            		".jssorb03 div { background-position: -5px -4px; }" +
			            		".jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }" +
			            		".jssorb03 .av { background-position: -65px -4px; }" +
			            		".jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }" +
			        		"</style>" 
			        	);

						$('#slider1_container').append(
							"<div u='navigator' class='jssorb03' style='position: absolute; bottom: 6px; left: 6px;'>" +
				            	"<div u='prototype' style='POSITION: absolute; WIDTH: 21px; HEIGHT: 21px; text-align:center; line-height:21px; color:White; font-size:12px;'><div u='numbertemplate'></div></div>" +
			        		"</div>"
		        		);						
						generateSlider();
	
					});					
				}

/*
				// Music links
				elementNumber = 0;
				var musiclinkList = "<nav><ul class='detail_list' id='musiclink_list'>";
				$.each( data.musiclinks, function( index, element ){
					musiclinkList += "<li><a href='" + element.link + "' target='_blank' >" + element.name + "</a></li>";
					elementNumber++;				
				});
				musiclinkList += "</nav></ul>";

				if( elementNumber > 0 ){
					$('#details_1column>table').append(
						"<tr>" +
							"<td style='white-space:nowrap;' valign='top'>" + "<?php echo getTranslation('label.detail.excursion.musiclinks')?>:" + "</td>" + 
							"<td valign='top'>" + musiclinkList + "</td>" +
						"</tr>"
					);
				}
*/
				// Picture button				
				var pictureObjects = data.picturelinks;
				if( pictureObjects != null ){
					$('#details_2column table').append(
						"<tr>" +
							"<td valign='top'>" + "" + "</td>" + 
							"<td style='white-space:nowrap;' valign='top'><button id='picture_button' type='button'><?php echo getTranslation('label.detail.excursion.picturelinks')?></button></td>" +
						"</tr>"
					);					
					$("#picture_button").click( function(){

						clearPictureContainer();
						$('#media_container').append( "<div id='slider1_container' style='position: relative; width: " + defaultPictureWidth + "px; height: " + defaultPictureHeight + "px; background-color: " + defaultPictureBackgroundColor + "; overflow: hidden; '></div>");
						$('#slider1_container').append("<div u='slides' style='cursor: move; position: absolute; left: 0px; top: 0px; width: " + defaultPictureWidth + "px; height: " + defaultPictureHeight + "px; overflow: hidden;'></div>");
						
						$.each( pictureObjects, function( index, element ){

							$('#slider1_container>div').append(
								"<div>" +
									"<img u='image' src='" + <?php getMediaURLString()?>element.href + "' />" +	
									"<div u='caption' t='MCLIP|B' t2='B' style='position: absolute; top: " + (defaultPictureHeight - defaultPictureCaptionHeight ) + "px; left: 0px; width: " + defaultPictureWidth + "px; height: " + defaultPictureHeight + "px;'>" +
										"<div style='position: absolute; top: 0px; left: 0px; width: " + defaultPictureWidth + "px; height: " + defaultPictureCaptionHeight + "px; background-color: Black; opacity: 0.5; filter: alpha(opacity=50);'></div>" +
										"<div style='position: absolute; top: 0px; left: 0px; width: " + defaultPictureWidth + "px; height: " + defaultPictureCaptionHeight + "px; color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;'>" +				                
											element.title +									
										"</div>" +
									"</div>" +
								"</div>"	
							);
							
						});	
						generateSlider();
	
					});					
				}				
			}
		}

		/**
		*
		* Kitakaritja a picture slider kontener tartalmat
		*
		*/
		function clearPictureContainer(){
		
			$('#media_container div').remove();
		}

		/*
		*
		* Reszletek torlese
		*
		*/
		function clearExcursionDetailContainer(){
			$('#excursion_details_container table').remove();
			$('#excursion_details_container').append(
					"<table align='center' border='0' width='100%' >" +
					"</table>"
		    );			
		}
		
		function generateSlider(){
			 var _CaptionTransitions = [];
	            _CaptionTransitions["L"] = { $Duration: 800, x: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
	            _CaptionTransitions["R"] = { $Duration: 800, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
	            _CaptionTransitions["T"] = { $Duration: 800, y: 0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
	            _CaptionTransitions["B"] = { $Duration: 800, y: -0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
	            _CaptionTransitions["TL"] = { $Duration: 800, x: 0.6, y: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
	            _CaptionTransitions["TR"] = { $Duration: 800, x: -0.6, y: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
	            _CaptionTransitions["BL"] = { $Duration: 800, x: 0.6, y: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
	            _CaptionTransitions["BR"] = { $Duration: 800, x: -0.6, y: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };

	            _CaptionTransitions["MCLIP|B"] = {$Duration:1900,$Clip:8,$Move:true,$Easing:{$Clip:$JssorEasing$.$EaseInOutCubic}};   //{ $Duration: 1600, $Clip: 8, $Move: true, $Easing: $JssorEasing$.$EaseOutExpo };
	                                             

			var options = {
					$FillMode: 1,                                       //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
					$AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
					$DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
					$AutoPlayInterval: 2500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
					$PauseOnHover: 1,                   				//[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
					$ArrowKeyNavigation: true,   						//[Optional] Allows keyboard (arrow key) navigation or not, default value is false
					$CaptionSliderOptions: {                            //[Optional] Options which specifies how to animate caption
						$Class: $JssorCaptionSlider$,                   //[Required] Class to create instance to animate caption
						$CaptionTransitions: _CaptionTransitions,       //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
						$PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
						$PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
					},					
					$BulletNavigatorOptions: {                          //[Optional] Options to specify and enable navigator or not
                        $Class: $JssorBulletNavigator$,                 //[Required] Class to create navigator instance
                        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                        $ActionMode: 1,                 				//[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                        $AutoCenter: 1,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                        $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                        $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                        $SpacingX: 10,                                  //[Optional] Horizontal space between each item in pixel, default value is 0
                        $SpacingY: 10,                                  //[Optional] Vertical space between each item in pixel, default value is 0
                        $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                    },
				};

				var jssor_slider1 = new $JssorSlider$("slider1_container", options);

				//you can remove responsive code if you don't want the slider scales while window resizes
				function ScaleSlider() {
					var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
					if (parentWidth)
						jssor_slider1.$ScaleWidth(Math.min(parentWidth, defaultPictureWidth));
					else
						window.setTimeout(ScaleSlider, 30);
				}
				ScaleSlider();

				$(window).bind("load", ScaleSlider);
				$(window).bind("resize", ScaleSlider);
				$(window).bind("orientationchange", ScaleSlider);

				$JssorPlayer$.$FetchPlayers(document.body);
		}
		
      	/**
		* Close all opened Info Window
		*/	                  	
      	function closeAllOpenedInfowindow(){        
			for (var i=0;i<infoWindows.length;i++) {
				infoWindows[i].close();
			}
      	}

		function getPinImage( color ){
			var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + color,
			    new google.maps.Size(21, 34),
			    new google.maps.Point(0,0),
		    	new google.maps.Point(10, 34));
	    	return pinImage;
		}
		
		function getPinShadow(){
			var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
		    	new google.maps.Size(40, 37),
		    	new google.maps.Point(0, 0),
		    	new google.maps.Point(12, 35));
	    	return pinShadow;
		}
		
		//If the DOM loaded then starts the initialize
		google.maps.event.addDomListener(window, 'load', initialize);

	</script>
</head>

<body>

	<!-- Upper menu line -->
	<div id="upper_menuline">
		<div id="upper_menu">
			<table border="0">
				<tr >
					<td>
						Login
					</td>
					<td>
						<!-- Language selector -->
						<select id="language_menu"></select>					
					</td>
				</tr>				
			</table>
		</div>
	</div>
	
	<div id="work_place">
		<div id="map_canvas" class="ui-widget-content"></div>				
		<div id="excursion_list">
			<table>
				<tr>
					<th><?php echo getTranslation("label.table.excursion")?></th>
					<th><?php echo getTranslation("label.table.date")?></th>
				</tr>
			</table>					
		</div>
		
		<div id="excursion_details_block">
			<div id="excursion_details_tab">^</div>
			<div id="excursion_details_container">			
			</div>
		</div>
		
	</div>				
	
</body>

</html> 




